<template>
  <div class="navbar-wrap main-menu d-none d-lg-flex">
    <ul class="navigation">
      <li :class="pagemark === routes.homepage ? 'active' : null">
        <router-link :to="routes.homepage">主页</router-link>
      </li>
      <li
        v-for="nav in navlist"
        :key="nav.meta.id"
        :class="pagemark === nav.meta.pagemark ? 'active' : null"
        v-if="nav.meta.requireAuth ? (isLogin ? true : false) : true"
      >
        <router-link :to="nav.path"> {{ nav.meta.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
 
<script>
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";

export default {
  components: {},
  data() {
    return {
      routes: {
        homepage: "/",
      },
    };
  },
  computed: {
    ...mapState({
      navlist: (state) => state.routes.navbarList,
      pagemark: (state) => state.temporary.pagemark,
    }),
    ...mapGetters("customer", { isLogin: "isLogin" }),
  },
  created() {},
  mounted() {
    this.navlist = [
      {
        path: "/fruitsvegetables",
        meta: {
          id: Mock.mock("@id"),
          title: "水果蔬菜",
          pagemark: "fruitsvegetables",
          name: "水果蔬菜",
        },
        component: "category.vue",
      },
      {
        path: "/dairymeat",
        meta: {
          id: Mock.mock("@id"),
          title: "乳肉制品",
          pagemark: "dairymeat",
          name: "乳肉制品",
        },
        component: "category.vue",
      },
      {
        path: "/supplies",
        meta: {
          id: Mock.mock("@id"),
          title: "生活用品",
          pagemark: "supplies",
          name: "生活用品",
        },
        component: "category.vue",
      },
      {
        path: "/officeStudy",
        meta: {
          id: Mock.mock("@id"),
          title: "学习用品",
          pagemark: "officeStudy",
          name: "学习用品",
        },
        component: "category.vue",
      },

      {
        path: "/sundry",
        meta: {
          id: Mock.mock("@id"),
          title: "杂货铺",
          pagemark: "sundry",
          name: "杂货铺",
        },
        component: "sundry.vue",
      },
      {
        path: "/promotions",
        meta: {
          id: Mock.mock("@id"),
          title: "优惠促销",
          requireAuth: false,
          pagemark: "promotions",
          name: "优惠促销",
        },
        component: "promotions.vue",
      },
    ];
  },
  watch: {},

  beforeCreate() {
    //获取导航栏路由
    this.$store.dispatch("routes/getnavbarList");
  },
  beforeDestroy() {},
  deactivated() {},
};
</script>
<style>
</style>